<template>
  <div class="loginCont">
    <img src="/img/login_bgImg.png" />
    <div class="maskCont">
      <div class="maskMain">
        <div class="maskLeft">
          <img src="/img/login_left_img.png" />
        </div>
        <div class="maskRight">
          <div class="maskTop">
            <h1>鲸领航-船员招聘企业管理系统</h1>
            <h3>Whale Pilot - Enterprise management system</h3>
          </div>
          <div class="formEnter">
            <div class="inputCont">
              <div class="inputName">Phone(手机号)</div>
              <div class="inputVal">
                <el-input
                  v-model="account"
                  type="text"
                  size="large"
                  placeholder="Enter your Phone"
                ></el-input>
              </div>
            </div>
            <div class="inputCont">
              <div class="inputName">Password(密码)</div>
              <div class="inputVal">
                <el-input
                  v-model="password"
                  type="password"
                  size="large"
                  show-password
                  placeholder="Enter your password"
                ></el-input>
              </div>
            </div>
            <el-button
              @click="loginFn"
              :loading="logining"
              :disabled="logining"
              color="#4b58dc"
              style="width: 100%"
              >{{ loginText }}</el-button
            >

            <div class="underCont">
              <div class="checkCont">
                <el-checkbox v-model="remenberPassword" />
                <span>记住密码</span>
              </div>
              <div class="tipText">
                <span>没有账号？</span>
                <span class="linkText" @click="registFn">立即注册</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import btn from "@/components/public/btn.vue";
import { login } from "@/http/api";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  components: { btn },
  data() {
    return {
      loginText: "登录",
      logining: false,
      account: "",
      password: "",
      xz_address: "",
      remenberPassword: false,
    };
  },
  props: {},
  methods: {
    registFn() {
      ElMessageBox.alert("请联系管理员申请开通：18483613963", "账号开通提醒", {
        confirmButtonText: "好的",
        callback: (action) => {},
      });
    },

    async loginFn() {
      if (this.account == "") {
        ElMessage({
          message: "请输入手机号",
          type: "warning",
        });
        return false;
      } else if (this.password == "") {
        ElMessage({
          message: "请输入密码",
          type: "warning",
        });
        return false;
      }
      if (!this.xz_address) {
        this.logining = true;
        this.loginText = "登录中";
        return false;
      }
      var data = {
        admin_username: this.account,
        admin_password: this.password,
        xz_address: this.xz_address,
      };
      login(data).then((res) => {
        if (res.data.code == 1) {
          const resData = res.data.data;
          localStorage.setItem("company_token", resData.token);
          localStorage.setItem("company_type", resData.type);
          localStorage.setItem("real_name", resData.real_name);
          localStorage.setItem("enterprise_name", resData.enterprise_name);
          localStorage.setItem("enterprise_logo", resData.enterprise_logo);
          if (this.remenberPassword) {
            localStorage.setItem("account", this.account);
            localStorage.setItem("password", this.password);
          } else {
            localStorage.setItem("account", "");
            localStorage.setItem("password", "");
          }
          localStorage.setItem("remenberPassword", this.remenberPassword);
          this.loginText = "登录成功";
          this.logining = false;
          ElMessage({
            message: "登陆成功",
            type: "success",
          });
          setTimeout(() => {
            this.$router.push({ path: "/leaderHome" });
          }, 1500);
        } else {
          this.logining = false;
          this.loginText = "登录";
        }
      });
    },
  },
  mounted() {},
  async created() {
    let geolocation = new BMap.Geolocation(); //返回用户当前的位置
    geolocation.getCurrentPosition((r) => {
      this.xz_address = r.address.city;
      if (this.logining) {
        this.loginFn();
      }
    });
    if (localStorage.getItem("remenberPassword") === "true") {
      this.account = localStorage.getItem("account");
      this.password = localStorage.getItem("password");
      this.remenberPassword = true;
    }
  },
};
</script>

<style scoped lang="less">
.loginCont {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
  }
  .maskCont {
    width: 100%;
    position: absolute;
    height: 100%;
    // background-color: rgba(75, 88, 220, 0.3);
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .maskMain {
      background-color: rgba(255, 255, 255, 0.8);
      width: 750px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 10px;
      overflow: hidden;
      height: 430px;
      .maskLeft {
        height: 100%;
        font-size: 0;
        img {
          height: 100%;
        }
      }
      .maskRight {
        flex: 1;
        width: 100px;
        padding: 30px;
        box-sizing: border-box;
        .maskTop {
          width: 100%;
        }
        .formEnter {
          .inputCont {
            width: 100%;
            margin-bottom: 25px;
            .inputName {
              margin-bottom: 10px;
            }
            .inputVal {
              display: flex;
              .phoneInput {
                width: 50px;
                flex: 1;
              }
            }
          }
          .loginBtn {
            padding: 0px 35px;
            background-color: #4b58dc;
            color: white;
            height: 40px;
            box-sizing: border-box;
            line-height: 40px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 12px;
            width: 100%;
          }
          .loginBtn:hover {
            opacity: 0.8;
          }
          .underCont {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            font-size: 12px;
            color: #999;
            .checkCont {
              display: flex;
              align-items: center;
              span {
                margin-left: 5px;
              }
            }
            .tipText {
              text-align: right;

              .linkText {
                text-decoration: underline;
                cursor: pointer;
              }
              .linkText:hover {
                color: #4b58dc;
              }
            }
          }
        }
      }
    }
    .formCont {
      background-color: #fff;
      width: 550px;
      margin: 0 auto;
      padding: 0 50px 30px;
      box-sizing: border-box;
      border-radius: 10px;
      .formLogo {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background-color: #fff;
        padding: 25px;
        box-sizing: border-box;
        position: relative;
        top: -60px;
        margin: 0 auto;
        overflow: hidden;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
